<template>
  <el-dialog
    title="编辑城市"
    :visible.sync="visible"
    width="600px">
    <div class="add-form">
      <el-transfer v-model="checkedCities" :data="cityList" :titles="['未选城市', '已选城市']"></el-transfer>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  editChannelCity,
  citySelect,     // 城市接口
} from "@/api/commodityfiles";
export default {
  data() {
    return {
      visible: false,
      checkedCities: [],
      cityList: [],
      channelData: {}
    }
  },
  methods: {
    show(data) {
      this.visible = true
      this.channelData = data
      if (data.cityList) {
        this.checkedCities = data.cityList.map(item => item.cityId)
      } else {
        this.checkedCities = []
      }
    },
    
    submit() {
      const params = this.getParams()
      editChannelCity(params).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '编辑成功'
          })
          this.visible = false
          this.$emit('edit')
        }
      })
    },
    getParams() {
      const params = {
        channelId: this.channelData.channelKey,
        deptIds: this.checkedCities
      }
      return params
    },
    getCityList() {
      citySelect().then(res => {
        const cityList = res.data.data || []
        this.cityList = cityList.map(item => {
          return {
            key: item.id,
            label: item.deptName
          }
        })
      })
    }
  },
  created() {
    this.getCityList()
  }
}
</script>

<style lang="scss" scoped>
.add-form {

}
</style>
